<template>
  <div id="article-list">

    <div class="recent_article">{{ title }}</div>
    <div class="solid_seq_line"></div>

    <div class="articles">
<!--      每一篇文章——标题，前部分内容-->
      <article-item v-for="article in articles" :key="this" :article="article"></article-item>

<!--      换页-->
      <div class="page">
        <span  @click="changePage(pageNum-1)" v-if="pageNum > 1" class="exist_page page_bt">上一页</span>
        <span v-else class="not_exist_page page_bt">上一页</span>

        <span>{{ pageNum }}</span>/<span>{{ totalNum }}</span>

        <span @click="changePage(pageNum+1)" v-if="pageNum < totalNum" class="exist_page page_bt">下一页</span>
        <span v-else class="not_exist_page page_bt">下一页</span>
      </div>
    </div>
  </div>
</template>

<script>
// import {articles} from "../../data/articles";
import ArticleItem from "./ArticleItem";
export default {
  name: "ArticleList",
  components:{ArticleItem},
  props:{
    title:{
      type:String,
      default:"最新文章"
    },
    articles:{
      type:Array,
      default: []
    },
    pageNum: {type:Number,default:0},
    totalNum: {type:Number,default:0}
  },
  data(){
    return {
    }
  },
  methods:{
    changePage(x){
      this.$emit("changepage1",x)
    }
  }
}
</script>

<style scoped>
#article-list{

}
/*文章列表展示*/
.recent_article{
  height:40px;
  font-size:20px;
  line-height: 40px;
  color: #343A40;
}

.solid_seq_line{
  height:3px;
  width:700px;
  background-color: #2C3E50;
}

/*页码*/
.page{
  margin:20px auto 0;
}
.page span{
  height:30px;
}
.page a{
  text-decoration: none;
  color:white;
}
.page .page_bt{
  width:60px;
  padding:5px 10px;
  border-radius: 5px;
  color:white;
  cursor:pointer;
}

.page .exist_page{
  background-color:#6DBCDB;
}
.page .not_exist_page{
  background-color:#ADE0F5;
}

</style>
